<template>
  <div class="screen">
    <v-touch @swipeleft ="ck" @swiperight="ck">
    <div class="topnav">
      <p @click="ck"><img :src="URL+'fork.png'" alt=""></p>
      <h2>筛选</h2>
    </div>
    <div class="allContent">
      <div class="edu">
        <h2>学历要求</h2>
        <div class="content1">
          <p v-for="item,index in list2" :key="index" @click="btn1(item,index)" :class="item.ischeck==true?'active':''">{{item.title}}</p>
        </div>
      </div>
      <div class="scale">
        <h2>公司规模</h2>
        <div class="content2">
          <p v-for="item,index in list3" :key="index" @click="btn1(item,index)" :class="item.ischeck==true?'active':''">{{item.title}}</p>
        </div>
      </div>
    </div>
    <div class="final">
      <button>清除</button>
      <button>确定</button>
    </div>
    </v-touch>
  </div>
</template>

<script>
export default {
  data(){
    return{
      list2:[
        {"title":"不限",ischeck:false},
        {"title":"初中及以下",ischeck:false},
        {"title":"中专/中技",ischeck:false},
        {"title":"高中",ischeck:false},
        {"title":"大专",ischeck:false},
        {"title":"本科",ischeck:false},
        {"title":"硕士",ischeck:false},
        {"title":"博士",ischeck:false}
      ],
      list3:[
        {"title":"不限",ischeck:false},
        {"title":"0-20人",ischeck:false},
        {"title":"20-99人",ischeck:false},
        {"title":"100-499人",ischeck:false},
        {"title":"500-999人",ischeck:false},
        {"title":"1000-9999人",ischeck:false},
        {"title":"10000人以上",ischeck:false},
      ],
      down:false,
      bjColor:"",
      border:""
    }
  },
  methods:{
    btn1(item){
      item.ischeck = !item.ischeck;
    },
    ck(){
      this.$router.back()
      this.$store.commit('judge')
    }
  }
}
</script>

<style lang="scss" scoped>
  .active{
    border: 2px solid #37c2bb;
    color: #37c2bb;
  }
  .topnav{
    display: flex;
    p{
      padding-left: 20px;
      padding-top: 20px;
      img{
        width: 45px;
        height: 45px;
      }
    }
    h2{
      margin-left: 125px;
      margin-top: 25px;
    }
  }
  .allContent{
    // height: 100vh;
    // background-color: rgb(231, 229, 229);
    .edu{
      background-color: white;
      margin-top: 10px;
      h2{
        margin: 20px 0 10px 20px;
      }
      .content1{
        // color: rgb(219, 217, 217);
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        p{
          width: 100px;
          height: 40px;
          background: rgba(238, 237, 237, 0.178);
          margin: 10px 10px 10px 15px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
    .scale{
      background-color: white;
      margin-top: 10px;
      h2{
        margin: 20px 0 10px 20px;
      }
      .content2{
        font-size: 14px;
        display: flex;
        flex-wrap: wrap;
        p{
          width: 100px;
          height: 40px;
          background: rgba(238, 237, 237, 0.178);
          margin: 10px 10px 10px 15px;
          text-align: center;
          line-height: 40px;
        }
      }
    }
  }
  .final{
    width: 100%;
    position: fixed;
    bottom: 0;
    button{
      height: 40px;
      margin: 0 0 0 25px;
      border: none;
    }
    button:nth-child(1){
      width: 80px;
      color: darkgray;
    }
    button:nth-child(2){
      width: 220px;
      color: white;
      background-color: #37c2bb;
    }
  }
</style>